<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    
</head>
<body>

    <div id="root">
        <button @click=student.age++>年龄+1岁</button>
        <button @click=addSex()>添加性别属性,默认值:男</button>
        <button v-if=student.sex @click=changeSex>修改性别</button> 
        <button @click=addFriend>在首位添加一个朋友</button>
        <button @click=changeFirstFriendName> 修改第一个朋友名字为mary</button>
        <button @click=addHobbe>添加一个爱好</button>
        <button @click=changeFirstHobbe>修改第一个爱好</button>
        <br>
        <h3>姓名:{{student.name}}</h3>
        <br>
        <h3>年龄:{{student.age}}</h3>
        <br>
        <h3 v-if = student.sex > 性别:{{student.sex}} </h3>
        <h3>朋友们</h3>
        <ul>
            <li v-for = '(friend, index) in student.friends'> 姓名: {{friend.name}} 年龄: {{friend.age}}  - {{index}} </li> 
        </ul>
        <h3>爱好</h3>
        <ul>
            <li v-for = '(hobbe, index) in student.hobbes' :key= index> 
                {{hobbe}}:
                <input type="text">
            </li>
        </ul>
    </div>

    <script type='text/javascript'>
        var vm = new Vue({ 
            el: '#root',
            data: {
                student:{
                    name:"tom",
                    age:18,
                    friends:[
                        {name: 'tony',age: 19},
                        {name: 'jack',age:22},
                        {name: 'rose',age:21}
                    ],
                    hobbes:["唱","跳","rap"]
                }
            },
            methods: {
                addSex(){
                    this.$set(this.student,"sex","男")
                },
                changeSex(){
                    this.student.sex = "女"
                },
                addFriend(){
                    this.student.friends.unshift({name: 'joho',age:30})
                },
                changeFirstFriendName(){
                    //this.$set(this.student.friends[0].name = "mary") //报错
                    this.student.friends[0].name = "mary" //不报错
                    //this.student.friends.splice(0,1,{name: 'mary',age: 19})//不报错
                },
                addHobbe(){
                    this.student.hobbes.unshift("打篮球")
                },
                changeFirstHobbe(){
                    //this.student.hobbes[0] = "蔡徐坤" //修改无效
                    this.$set(this.student.hobbes,0,"蔡徐坤")
                   // this.student.hobbes.splice(0,1,"蔡徐坤")
                }
            },
        })
    </script>
    


</body>
</html>